<template>
  <div class="orderPane">
    <div class="head">
      <span class="one">博</span>
      <span class="two">彩</span>
      <span class="tree">公</span>
      <span class="four">司</span>
    </div>
    <scrolls></scrolls>
    <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane label="" name="first">
        <el-table
          :data="tableData"
          style="wbnoth: 100%">
          <el-table-column type="expand">
            <template slot-scope="props">
              <el-form label-position="left" inline class="demo-table-expand">
                <el-form-item label="详情描述">
                  <span>{{ props.row.category }}</span>
                </el-form-item>
              </el-form>
            </template>
          </el-table-column>
          <el-table-column
            label="公司编号"
            prop="bno">
          </el-table-column>
          <el-table-column
            label="公司名称"
            prop="name">
          </el-table-column>
          <el-table-column
            label="公司概述"
            prop="desc">
          </el-table-column>
        </el-table>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>
<script>
import scrolls from "./scrolls";

export default {
  components:{
    scrolls
    // order
  },
  name: "bookmaker",
  data() {
    return {
      activeName:"first",
      tableData: [{
        bno: 'B0001',
        name: '大和公司',
        desc: '你好呀',
        category: '通过日本本土搜查',
      }, {
        bno: 'B0002',
        name: '白加公司',
        desc: '杂司吉安',
        category: '中国制造',
      }, {
        bno: 'B0003',
        name: '琼碧',
        desc: '日系',
        category: '海纳百川，有容乃大',
      }, {
        bno: 'B0004',
        name: '青丝滕幻',
        desc: '摩西摩西',
        category: '全球联盟',
      }]
    }
  }, methods: {
    handleClick(tab, event) {

    }

  }, created() {
  }

}
</script>

<style scoped lang="stylus">
.head
  font-family "华文琥珀"
  font-size 56px
  margin-top 20px
  margin-bottom 20px
  letter-spacing 60px
  .one
    color red
  .two
    color yellow
  .three
    color blue
  .four
    color green
  .span
    left 55px
.orderPane
  label

  margin-top 20px
.demo-table-expand
  font-size: 0

.demo-table-expand
  label
  wbnoth: 90px
  color: #99a9bf

.demo-table-expand
  .el-form-item
    margin-right: 0;
    margin-bottom: 0;
    wbnoth: 50%;


</style>
